<template>
	<view class="content">
		<form @submit="onSave">
			<view class="box">
				<text>姓名:</text>
				<input type="text" name='name' v-model="list.FConsignee"></input>
			</view>
			<view class="box">
				<text>电话:</text>
				<input type="number" name='phone' v-model="list.FPhone"></input>
			</view>
			<view class="box">
				<text>邮编:</text>
				<input type="text" placeholder="如:510000" name='postcode' v-model="list.FZipcode"></input>
			</view>
			<view class="box">
				<text>城市区域:</text>
				<!-- <input type="text" placeholder="如:广东广州天河" name='city' value="{{list.FPrCityArea}}"></input> -->
				<view @tap="togglePopup('bottom','popup')" data-type="bottom" data-open="popup" class="input text">
					<view v-for="(item,index) in selectList" :key="index" style="display: inline-block;">
						{{item.txt}}<span v-if="index == 0 || index == 1">—</span>
					</view>
				</view>
				<uni-popup ref="popup" :type="type" @change="change1">
					<view class="select-border">
						<view class="header">
							<view class="title">
								选择地区
							</view>
							<view class="cancel-icon" @tap="cancel('popup')">
								X
							</view>
						</view>
						<view class="select-box">
							<view class="select-item">
								<view class="select-list" @tap="tabEvent(index)"
									:class="indexTab == index ? 'selected' : ''" v-for="(item, index) in selectList"
									:key="index">
									{{item.txt}}
								</view>
							</view>
							<view class="select-item-box">
								<!-- 省 -->
								<view class="province-box" v-show="proviceShow">
									<view class="select-list-cont" @tap="provinceEvent(item,index)"
										v-for="(item,index) in provinceData" :key="item.code">
										{{item.name}}<span class="check" v-show="index == checkOne">√</span>
									</view>
								</view>
								<!-- 市 -->
								<view class="city-box" v-show="cityShow">
									<view class="select-list-cont" @tap="cityEvent(item,index)"
										v-for="(item,index) in cityData" :key="item.code">
										{{item.name}}<span class="check" v-show="index==checkTwo">√</span>
									</view>
								</view>
								<!-- 区 -->
								<view class="area-box" v-show="areaShow">
									<view class="select-list-cont" @tap="areaEvent(item,index)"
										v-for="(item,index) in areaData" :key="item.code">
										{{item.name}}<span class="check" v-show="index==checkThree">√</span>
									</view>
								</view>
							</view>
						</view>
					</view>
				</uni-popup>

			</view>
			<view class="box">
				<text>详细地址:</text>
				<input type="text" placeholder='如:某某小区某某街道某某巷' name='addresss' v-model="list.FAddress"></input>
			</view>
			<view class="box default-row">
				<text class="tit">设为默认</text>
				<switch :checked="change" color="#fa436a" @click="switchChange" />
			</view>
			<button form-type="submit" id="save" role="button" aria-disabled="false">保存</button>
		</form>
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import cityDatas from '../../../../../utils/city.area.js'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				provinceData: cityDatas,
				cityData: [],
				areaData: [],
				selectList: [{
					txt: '请选择'
				}, {
					txt: '请选择'
				}, {
					txt: '请选择'
				}],
				tabOne: '请选择',
				indexTab: 0,
				proviceShow: true,
				areaShow: false,
				cityShow: false,
				show: false,
				type: '',
				checkOne: null,
				checkTwo: null,
				checkThree: null,

				addressData: '', //修改的地址数据
				id: 0,
				share: 1,
				list: '',

				manageType: '', //
				change: false,
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {

			//console.log(options);
			let title = '新增收货地址';

			let data = options;
			if (data.type == 'edit') {
				title = '编辑收货地址';
				let list = JSON.parse(data.data);
				this.addressData = list;
				this.manageType = data.type
				this.modifyData(list);
			} else {
				this.manageType = data.type;
				this.share = data.data;
			}
			uni.setNavigationBarTitle({
				title
			})
		},
		methods: {

			onSave: function(e) {
				//console.log(e.detail.value);
				let data = e.detail.value;
				let url = '',
					selectList = this.selectList,
					city = selectList[0].txt + selectList[1].txt + selectList[2].txt,
					AddressData = {
						"FPhone": data.phone, //电话
						"FAddress": data.addresss, //详细地址
						"FZipcode": data.postcode || '525300', //邮编
						"FConsignee": data.name, //名称
						"FPrCityArea": city, //城市区域
						'FDefault': this.change, //是否默认
						"FPrvID": this.selectList[0].code,
						"FCityID": this.selectList[1].code,
						"FAreaID": this.selectList[2].code,
					};

				function toast(txt) {
					uni.showToast({
						title: txt,
						icon: 'none',
						duration: 3000,
					})
				}

				if (!data.name) {
					toast('请填写收货人姓名');
					return;
				}
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.phone)) {
					toast('请输入正确的手机号码');
					return;
				}
				if (!city) {
					toast('请选择所在区域');
					return;
				}
				if (!data.addresss) {
					toast('请填写门牌号信息');
					return;
				}
				// WxUserInfo/UpdateAddress
				this.manageType == 'edit' ? url = 'WxUserInfo/UpdateAddress' : url = 'WxUserInfo/AddAddress';
				if (this.manageType == 'edit') {
					AddressData.itemid = this.addressData.FItemID;
				}
				//console.log(AddressData);
				this.$util.util(url, AddressData, 'POST').then(res => {
					//console.log(res);
					if (this.share == 0) {
						let Sharedata = uni.getStorageSync('Sharedata');
						let Share = JSON.parse(Sharedata);
						let selectID = '';
						Share.id == 0 ? selectID = 1 : (Share.id == 1 ? selectID = 2 : selectID = 3);
						uni.redirectTo({
							url: '/pages/Marketing/index/select/select' + selectID + '?share=' + this
								.data.share + '&Sharedata=' + Sharedata,
						})
					} else {
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
				}) //.catch(error=>//console.log(error));
			},
			modifyData(item) {
				let befault = item.FDefault,
					provinceData = this.provinceData,
					change = befault == 1 ? true : false,
					selectList = [{
						txt: '',
						code: ''
					}, {
						txt: '',
						code: ''
					}, {
						txt: '',
						code: ''
					}]
				//console.log(item,befault);
				for (var i in provinceData) {
					if (item.FPrvID == provinceData[i].code) {
						selectList[0].txt = provinceData[i].name;
						selectList[0].code = provinceData[i].code;

						let cityList = provinceData[i].cityList;
						for (var j in cityList) {
							if (item.FCityID == cityList[j].code) {
								selectList[1].txt = cityList[j].name;
								selectList[1].code = cityList[j].code;

								let areaList = cityList[j].areaList;
								for (var k in areaList) {
									if (item.FAreaID == areaList[k].code) {
										selectList[2].txt = areaList[k].name
										selectList[2].code = areaList[k].code;
									}
								}
							}
						}
					}
				}
				this.change = change;
				this.selectList = selectList;
				this.list = {
					FConsignee: item.FConsignee,
					FPhone: item.FPhone,
					FZipcode: item.FZipcode,
					FAddress: item.FAddress,
				};
				//console.log(this.data.change);
			},

			togglePopup(type, open) {
				this.type = type
				if (open === 'tip') {
					this.show = true
				} else {
					this.$refs[open].open()
				}
			},
			cancel(type) {
				if (type === 'tip') {
					this.show = false
					return
				}
				this.$refs[type].close()
			},
			change1(e) {
				if (e.show == true) {
					uni.hideTabBar()
				} else {
					uni.showTabBar()
				}
			},
			tabEvent(index) {
				this.indexTab = index
				if (this.indexTab == 0) {
					this.proviceShow = true
					this.cityShow = false
					this.areaShow = false
					// this.checkOne = null
					this.checkTwo = null
					this.checkThree = null
					// this.cityData = []
					this.areaData = []
					// this.selectList[0].txt = "请选择"
					this.selectList[1].txt = "请选择"
					this.selectList[2].txt = "请选择"
				} else if (this.indexTab == 1) {
					this.proviceShow = false
					this.cityShow = true
					this.areaShow = false
					// this.checkTwo = null
					this.checkThree = null
					// this.areaData = []
					// this.selectList[1].txt = "请选择"
					this.selectList[2].txt = "请选择"
				} else if (this.indexTab == 2) {
					this.proviceShow = false
					this.cityShow = false
					this.areaShow = true
				}
			},
			provinceEvent(data, index) {
				this.checkOne = index
				this.selectList[0].txt = data.name
				this.indexTab = 1
				this.proviceShow = false
				this.cityShow = true
				this.areaShow = false
				this.cityData = data.cityList
			},
			cityEvent(data, index) {
				this.checkTwo = index
				this.selectList[1].txt = data.name
				this.indexTab = 2
				this.proviceShow = false
				this.cityShow = false
				this.areaShow = true
				this.areaData = data.areaList
			},
			areaEvent(data, index) {
				this.checkThree = index
				this.selectList[2].txt = data.name
			},
			//选择地点
			switchChange(e) {
				this.change = !this.change;
			}
		}
	}
</script>

<style>
	view,
	scroll-view,
	swiper,
	swiper-item,
	cover-view,
	cover-image,
	icon,
	text,
	rich-text,
	progress,
	button,
	checkbox,
	form,
	input,
	label,
	radio,
	slider,
	switch,
	textarea,
	navigator,
	audio,
	camera,
	image,
	video {
		-webkit-box-sizing: border-box;
		box-sizing: initial;
	}

	.content {
		width: 100%;
		height: auto;
	}

	#save {
		width: 558rpx;
		height: 102rpx;
		line-height: 102rpx;
		display: block;
		margin: 0 96rpx;
		background: #707070;
		border-radius: 8rpx;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		position: fixed;
		bottom: 20rpx;
	}

	.box {
		width: 100%;
		height: 60rpx;
		padding: 10rpx 0;
	}

	.box text {
		display: block;
		float: left;
		line-height: 60rpx;
		text-align: center;
		width: 150rpx;
	}

	.box input,
	.input {
		width: 520rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-bottom: 2rpx solid #000;
		display: block;
		float: right;
		margin-right: 20rpx;
	}

	.input {
		flex: 1;
		font-size: 30rpx;
		color: #303133;
	}

	/* 地址选择器 */
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 35rpx;
	}

	.title {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.cancel-icon {
		font-size: 34rpx;
		color: rgba(153, 153, 153, 1);
	}

	.check {
		padding-left: 17rpx;
		color: #FF7E28;
	}

	.select-box {
		height: 1024rpx;
	}

	.select-item {
		display: flex;
		align-items: center;
		padding-left: 50rpx;
		margin-bottom: 20rpx;
		border-bottom: 1px solid #F6F6F6;
	}

	.select-list {
		width: 120rpx;
		height: 40rpx;
		text-align: center;
		overflow: hidden;
		/*超出部分隐藏*/
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		white-space: nowrap;
		/*规定段落中的文本不进行换行 */
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		margin-right: 30rpx;
		border-bottom: 1px solid #FFFFFF;
	}

	.select-list-cont {
		padding-left: 67rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 40px;
	}

	.selected {
		border-bottom: 1px solid #F0AD4E;
		color: rgba(255, 133, 0, 1);
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30rpx;
		height: 110rpx;
		background: #fff;


	}

	.tit {
		flex-shrink: 0;
		width: 120rpx;
		font-size: 30rpx;
		color: #303133;
	}

	/* .input{
			flex: 1;
			font-size: 30rpx;
			color: $font-color-dark;
		}
		.icon-shouhuodizhi{
			font-size: 36rpx;
			color: $font-color-light;
		} */
	.default-row {
		margin-top: 16rpx;
	}

	.tit {
		flex: 1;
	}

	switch {
		transform: translateX(16rpx) scale(.9);
		float: right;
		margin-right: 50rpx;
	}
</style>
